<template>
    <div class="todo-container">
        <van-pull-refresh class="todo-pull-refresh" v-model="isLoading" @refresh="onRefresh">
            <div class="todo-list">
                <div class="todo-item" v-for="item of list" :key="item.id" @click="goDetails(item.id)">
                    <div class="title-box clearfix">
                        <span class="title">{{item.title}}:</span>
                        <span class="status" :style="{'color':getStatusColor(item.status)}">{{item.statusString}}</span>
                        <span class="stage">{{item.currentStage}}/{{item.stage}}</span>
                    </div>
                    <div class="content-item" v-for="item1 of item.content" :key="item1.key">
                        <span>{{item1.key}}：</span>
                        <span>{{item1.value}}</span>
                    </div>
                    <div class="examiner-box">
                        <div class="examiner-item" v-for="item2 of item.examiner" :key="item2.id">
                            <span class="examiner-img"><img class="fullimg" :src="item2.src"></span>
                            <span class="name">{{item2.name}}</span>
                            <span class="status" :style="{'color':getStatusColor(item2.status)}">{{item2.statusString}}</span>
                        </div>
                    </div>
                    <div class="btn">
                        <van-button type="danger" size="small">跟催</van-button>
                    </div>
                </div>
            </div>
        </van-pull-refresh>
    </div>
</template>
<script>
import { Toast } from 'vant';
import myMixin from '@/mixins';

export default {
    name: 'Todo',
    mixins: [myMixin],
    data() {
        return {
            isLoading:false,
            list:[]
        }
    },
    mounted() {
        Toast.loading({
            message: '加载中...',
            forbidClick: true,
            duration:0
        });
        setTimeout(() => {
            Toast.clear();
            let list = this.getData();
            this.list = [...this.list,...list];
        },1000);
    },
    methods:{
        goDetails(id) {
            this.getInfoBeforeJump(Toast,{path:'/details/'+id})
        },
        onRefresh() {
            setTimeout(() => {
                Toast('刷新成功');
                this.isLoading = false;
                let list = this.getData();
                this.list = [...this.list,...list];
            }, 1000);
        },
        getStatusColor(status) {
            let color = '';
            switch (status) {
                case 1:
                case 3:
                    color = '#1989fa';
                    break;
                case 2:
                    color = '#07c160';
                     break;
            }
            return color;
        },
        getData() {
            let index = this.list.length+1;
            let list = [
                {
                    id:index,
                    title:'渊的任务指派单',
                    status:1,
                    statusString:'审核中',
                    date:'2019-01-26',
                    stage:1,
                    currentStage:1,
                    code:189,
                    content:[
                        {
                            key:'编码',
                            value:189
                        },
                        {
                            key:'资质类别',
                            value:'没有'
                        },
                        {
                            key:'经办人',
                            value:'邓渊'
                        },
                        {
                            key:'时间',
                            value:'2019-01-26'
                        },
                        {
                            key:'使用事由',
                            value:'开始看书看开始看书看开始看书看开始看书看开始看书看开始看书看开始看'
                        }
                    ],
                    examiner:[
                        {
                            id:1,
                            name:'蔡文姬',
                            src:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4052667666,3811234810&fm=26&gp=0.jpg',
                            status:2,
                            statusString:'通过审批'
                        },
                        {
                            id:2,
                            name:'蔡文姬',
                            src:'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4052667666,3811234810&fm=26&gp=0.jpg',
                            status:3,
                            statusString:'执行中'
                        }
                    ]
                }
            ]
            return list;
        },
    }
}
</script>
<style lang="less">
@import '../../../css/var.less';
.todo-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}
.todo-list {
    min-height: 568px;
    .todo-item {
        padding:10px 16px;
        box-sizing:border-box;
        background:#fff;
        line-height: 1.5;
        font-size: 14px;
        color:#333;
        margin-bottom:15px;
        .title-box {
            .status {
                margin-left:10px;
                color:@color;
            }
            .stage {
                float:right
            }
        }
        .content-item {
            .content-value {

            }
        }
        .examiner-box {
            margin-top:5px;
            display:flex;
            flex-direction: row;
            justify-content:flex-start;
            align-items:center;
            flex-wrap: wrap;
            font-size: 13px;
            .examiner-item {
                margin-right:20px;
                display:flex;
                flex-direction: column;
                align-items: center;
                .examiner-img {
                    display:inline-block;
                    width: 60px;
                    height: 60px;
                }
            }
        }
        .btn {
            padding-bottom:10px;
            text-align:center;
        }
    }
}
</style>